<template>
  <el-card>
    <el-button @click="$router.push('/admin/add')" type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
    <el-divider></el-divider>
    <el-table :data="list">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="rolename" label="角色名称"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot='scope'>
          <el-button
          @click="$router.push('/admin/'+scope.row.uid)"
            type="success"
            circle
            size="mini"
            icon="el-icon-edit"
          ></el-button>
          <el-button
          @click="del(scope.row.uid)"
            type="danger"
            circle
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="pageChange"
      :page-size="size"
      background
      layout="prev ,pager,next"
      :total="total"
    ></el-pagination>
  </el-card>
</template>

<script>
import { getAdminList, getAdminTotal } from "../../request/admin";
export default {
  data() {
    return {
      total: 0,
      page: 1,
      size: 1,
      list: [],
    };
  },
  methods: {
    del(uid){
       this.$confirm(()=>{
         // 删除
         this.$http.post('/api/userdelete',{uid}).then(res=>{
             if(res.code===200){
                 // 更新视图
                 // 根据id找索引
                 const index=this.list.findIndex(item=>item.uid===uid);
                 this.list.splice(index,1);
                 this.$success('删除成功');
             }else{
                 this.$error(res.msg);
             }
         })
       })
    },
    pageChange(page) {
      this.page = page;
      this.getAdminList();
    },
    async getAdminList() {
      const list = await getAdminList(this.page, this.size);
      if (list) {
        this.list = list;
      }
    },
    async getAdminTotal() {
      const list = await getAdminTotal();
      if (list) {
        this.total = list[0].total;
      }
    },
  },
  created(){
      this.getAdminList()
      this.getAdminTotal()

  }
  
};
</script>

<style>
</style>